<template>
  <div>
    <div class="home_t">
      <!-- 轮播 -->
      <swiperBanner ref="swiperBanner"></swiperBanner>
      <div class="advert-push1 heart_w">
        <el-row>
          <el-col :span="8">
            <a href="javascript:void(0);">
              <el-image
                src="http://cremb-zsff.oss-cn-beijing.aliyuncs.com/aa1fc20210918145716698.jpg"
              >
              </el-image>
            </a>
          </el-col>
          <el-col :span="8">
            <a href="javascript:void(0);">
              <el-image
                src="http://cremb-zsff.oss-cn-beijing.aliyuncs.com/aa1fc20210918145716698.jpg"
              >
              </el-image>
            </a>
          </el-col>
          <el-col :span="8">
            <a href="javascript:void(0);">
              <el-image
                src="http://cremb-zsff.oss-cn-beijing.aliyuncs.com/c91e9202109181457114788.jpg"
              ></el-image>
            </a>
          </el-col>
        </el-row>
      </div>

      <!-- 精品课程 -->
      <div class="recommend heart_w">
        <div class="head_t">
          <div class="Boutique">
            <h3>精品课程</h3>
          </div>
          <div class="tab_cut">
            <ul class="tab">
              <li
                :class="{ cur: active_cur == i }"
                @click="courseClick(i, 1, it)"
                v-for="(it, i) in dataTabs"
                :key="it.id"
              >
                {{ it.name }}
              </li>
            </ul>
          </div>
        </div>

        <el-row v-if="studyData.length !== 0">
          <el-col :span="6" v-for="item in studyData" :key="item.id">
            <router-link
              :to="{ path: '/handpick_kc', query: { id: item.id } }"
              target="_blank"
            >
              <el-image :src="item.image"></el-image>
              <div>
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="browse-money"></div>
                <div class="label-count">
                  <div style="color: #ff6b00; font-size: 18px">
                    ￥{{ item.price }}
                  </div>
                  <div class="money">{{ item.buy_nums }} 人已购买</div>
                </div>
              </div>
            </router-link>
          </el-col>
        </el-row>
        <!-- 暂无数据 -->
        <div class="noData" style="text-align: center" v-else>
          <img src="@/assets/images/noData.png" alt="" style="height: 100%" />
        </div>

        <router-link
          class="seeMore"
          to="/course"
          target="_blank"
          v-if="studyData.length !== 0"
        >
          查看更多课程 <i class="el-icon-d-arrow-right"></i>
        </router-link>
      </div>

      <!--热门直播 -->
      <div class="recommend recommend2 heart_w">
        <div class="head_t">
          <div>
            <h3>热门直播</h3>
          </div>
        </div>

        <el-row>
          <el-col :span="6" v-for="item in hotLiveData" :key="item.id">
            <router-link
              :to="{ path: `/hot_live?id=${item.id}`, query: {} }"
              target="_blank"
            >
              <div style="position: relative">
                <div class="live1">{{ item.cate_name }}</div>
                <el-image :src="item.image"></el-image>
              </div>

              <div style="padding: 0 15px">
                <div class="title">
                  {{ item.time }}
                </div>
                <div class="live_teacher">
                  {{ item.title }}
                  <button class="button_global">立即预约</button>
                </div>
                <div class="label-count">
                  <div class="actrie">
                    <el-image :src="item.teacher_image"></el-image>
                    融跃名师：{{ item.teacher_name }}
                  </div>
                  <div class="money free">{{ item.free_text }}</div>
                </div>
              </div>
            </router-link>
          </el-col>
        </el-row>

        <router-link to="/lesson_live" class="seeMore" target="_blank">
          查看更多直播 <i class="el-icon-d-arrow-right"></i>
        </router-link>
      </div>

      <!--名师大咖 -->
      <div class="recommend content_nav">
        <div class="head_t heart_w">
          <div class="Boutique">
            <h3>实力·融跃</h3>
            <span>为您的通关之路保驾护航！</span>
          </div>
        </div>

        <div class="swiper_teacher">
          <div
            class="swiper-container seamless01-swiper"
            v-for="item in 3"
            :key="item"
          >
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="item in 18" :key="item">
                <a class="teacher_img" :href="`#/top_teacher`" target="_blank">
                  <img
                    src="https://www.rongyuejiaoyu.com/static/index/images/New-Clara.jpg"
                  />
                  <p style="display: block">Min</p>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 学习·融跃 -->
      <div class="system-push heart_w">
        <el-row>
          <!-- 学习融跃 -->
          <el-col :span="8">
            <div class="rank">
              <div class="title">
                <div>
                  学习<span>融跃</span>
                  <span>热门课程，好评推荐</span>
                </div>
                <el-link
                  :underline="false"
                  icon="el-icon-arrow-right"
                ></el-link>
              </div>

              <div class="content">
                <a
                  :href="`#/handpick_kc?id=${item_ta.id}`"
                  v-for="item_ta in studyData.slice(0, 3)"
                  :key="item_ta.id"
                >
                  <el-image :src="item_ta.image"> </el-image>
                  <div>
                    <div>{{ item_ta.title }}</div>
                    <div>{{ item_ta.buy_nums }}已购买</div>
                  </div>
                </a>
              </div>
            </div>
          </el-col>

          <!-- 课程推荐 -->
          <el-col :span="8">
            <div class="hot">
              <div class="title">
                <div>
                  课程<span>推荐</span>
                  <span>融跃懂你，更懂你所需</span>
                </div>
                <el-link :underline="false" icon="el-icon-arrow-right">
                </el-link>
              </div>
              <!-- swiper -->
              <div class="block">
                <div class="swiper-container">
                  <div class="swiper-wrapper">
                    <div
                      class="swiper-slide"
                      :title="image.title"
                      v-for="image in courseList"
                      :key="image.id"
                    >
                      <a :href="`#/handpick_kc?id=${image.id}`">
                        <img :src="image.image" alt="" />
                        <div>
                          <div>
                            {{ image.title }}
                          </div>
                          <div>
                            {{ image.subtitle }}
                          </div>
                          <div class="free">{{ image.free_text }}</div>
                        </div>
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-col>

          <!-- 图书推荐 -->
          <el-col :span="8">
            <div class="new">
              <div class="title">
                <div>
                  图书<span>推荐</span>
                  <span>正版图书，让学习少一些弯路</span>
                </div>
                <el-link
                  :underline="false"
                  icon="el-icon-arrow-right"
                  target="_blank"
                >
                </el-link>
              </div>

              <div class="content">
                <router-link
                  :to="{ path: '/book_detail', query: { id: item_t.id } }"
                  target="_blank"
                  v-for="item_t in booksList"
                  :key="item_t.id"
                >
                  <el-image :src="item_t.image"></el-image>
                  <div>
                    <div>{{ item_t.title }}</div>
                    <div>
                      ￥<span>{{ item_t.price }}</span>
                    </div>
                  </div>
                </router-link>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 下载中心 -->
      <div class="recommend down_t heart_w">
        <div class="head_t">
          <div class="Boutique">
            <h3>资料下载</h3>
            <!-- <span>多维学习资料，一键免费下载</span> -->
          </div>
          <div class="tab_cut">
            <ul class="tab">
              <li
                :class="{ cur: dataDownload_cur == i }"
                @click="courseClick(i, 4, it)"
                v-for="(it, i) in dataTabs"
                :key="it.id"
              >
                {{ it.name }}
              </li>
            </ul>
          </div>
        </div>
        <el-row style="min-height: 150px">
          <el-col
            :span="12"
            v-for="(item_download, i) in downloadData"
            :key="i"
          >
            <div class="list_nav">
              <div class="img_left_t">
                <img
                  src="https://www.rongyuejiaoyu.com/static/material/assets/images/tubiao.png"
                  alt=""
                />
                <div class="main_list">
                  <p class="item_p">
                    <span>{{ item_download.free_text }}</span>
                    <span>{{ item_download.title }}</span>
                  </p>
                  <p>
                    <span>{{ item_download.size }}</span>
                    &nbsp;&nbsp;<span>|</span>&nbsp;&nbsp;
                    <span>下载数：{{ item_download.down_nums }}</span>
                  </p>
                </div>
              </div>
              <a href="#" class="down_a" target="_blank" download>
                {{ item_download.button_text }}
              </a>
              <!-- <button
                type="button"
                class="el-button el-button--danger is-round"
              >
                <span> 立即下载 </span>
              </button> -->
            </div>
          </el-col>
        </el-row>

        <!-- 查看更多资料 -->
        <router-link to="/download_datum" class="seeMore" target="_blank">
          查看更多资料 <i class="el-icon-d-arrow-right"></i>
        </router-link>
      </div>

      <!-- 新闻资讯 -->
      <div class="recommend news-push heart_w">
        <div class="head_t" style="padding: 18px 5px">
          <div class="Boutique">
            <h3>资讯·融跃</h3>
            <!-- <span>掌握一手官网报考信息，随时随地了解官网考试动态</span> -->
          </div>
          <div class="tab_cut">
            <ul class="tab">
              <li
                :class="{ cur: consult_cur == i }"
                @click="courseClick(i, 3, it)"
                v-for="(it, i) in dataTabs"
                :key="it.id"
              >
                {{ it.name }}
              </li>
            </ul>
          </div>
          <div class="more_g">
            <router-link to="/article_news"> 更多 》</router-link>
          </div>
        </div>
        <div class="content">
          <a
            href="javascript:void(0);"
            v-for="item_s in advisory"
            :key="item_s.type_id"
            class="article_t"
          >
            <el-image :src="item_s.image"></el-image>
            <div class="cont_left">
              <h2>{{ item_s.type_name }}</h2>
              <p v-for="item_t in item_s.list" :key="item_t.id">
                <a
                  :href="`#/articleDetails?id=${item_t.id}&type_id=${item_s.type_id}`"
                  target="_blank"
                >
                  {{ item_t.title }}
                </a>
              </p>
              <a
                :href="`#/consult/examCourse?id=${item_s.type_id}&tabIds=${zixunId}`"
                class="moreadd"
                target="_blank"
              >
                More+
              </a>
            </div>
          </a>
        </div>
      </div>

      <!-- 发展·融跃 -->
      <div class="develop heart_w recommend">
        <div class="head_t">
          <div class="Boutique">
            <h3>分校·融跃</h3>
            <!-- <span>多元化智慧课堂，学练一体，助力稳步提升</span> -->
          </div>
          <div class="tab_cut">
            <ul class="tab">
              <li
                :class="{ cur: develop_cur == i }"
                @click="courseClick(i)"
                v-for="(it, i) in developList"
                :key="it.id"
              >
                {{ it.name }}
              </li>
            </ul>
          </div>
        </div>

        <div class="Cooperation" v-if="!develop_cur">
          <img
            src="https://www.rongyuejiaoyu.com/static/index/images/Index_Partners.png"
            alt=""
            style="width: 100%; height: auto"
          />
          <p class="dot_box">
            <span class="dot zhengzou"></span>
          </p>
        </div>
        <div class="map_t" v-else>
          <img
            src="https://www.rongyuejiaoyu.com/static/index/images/map_index.png"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import swiperBanner from '@/views/Layout/commons/swiperBanner.vue'
import {
  getGainTeachers,
  getCourseList,
  gethotLiveData,
  getCateData,
  getBookList,
  getStudyList,
  getNewsList,
  getDownFileList
} from '@/api/homePage.js'


export default {
  name: 'home_s',
  components: {
    swiperBanner
  },
  data() {
    return {
      active_cur: 0, // 精选课程
      exam_cur: 0, // 考试推荐
      consult_cur: 0, // 咨询·融跃
      dataDownload_cur: 0, // 资料下载
      develop_cur: 0,
      zixunId: 1, // 咨询 tabs-Id
      courseId: 1, // 课程Id
      cateId: 1, // 资料下载
      studyData: [], //
      teachersList: [],
      courseList: [],
      dataTabs: [],
      hotLiveData: [],
      advisory: [], // 咨询列表
      booksList: [], //图书推荐
      downloadData: [],
      developList: [
        { name: '融跃合作', id: 0 },
        { name: '融跃发展', id: 1 }
      ]
    }
  },
  mounted() {
    /* 53客服 */
    // ;(function () {
    //   var _53code = document.createElement('script')
    //   _53code.src =
    //     'https://tb.53kf.com/code/code/a2a882948d9a2eb955e5b2114833baad4/1'
    //   var s = document.getElementsByTagName('script')[0]
    //   s.parentNode.insertBefore(_53code, s)
    // })()

    setTimeout(() => {
      // 新闻咨询模块
      new this.$swiper('.block .swiper-container', {
        direction: 'horizontal', // 水平切换选项
        loop: true, // 循环模式选项
        autoplay: true, //自动切换
        effect: 'slide', // 切换效果
        slidesPerView: 'auto',
        centeredSlides: true,
        spaceBetween: 10
      })
    }, 1000)
    this.TeacherFn()
  },
  created() {
    this.getPageList()
    // console.log(
    //   '%c融跃教育官方网站-成就年轻梦想! 提供专业教育、职业考试培训、职业技能培训等多元化的学习服务和全周期的人才服务!\nhttps://www.rongyuejiaoyu.com/',
    //   'color:red'
    // )
    this.studtList(this.courseId)
    this.getNewListData(this.zixunId)
    this.downFileList(this.cateId)
  },
  methods: {
    TeacherFn() {
      // 师资团队
      let mySwiper = new this.$swiper('.swiper_teacher .swiper-container', {
        slidesPerView: 8,
        spaceBetween: 0,
        allowTouchMove: false,
        allowMouseWheel: false,
        autoplay: {
          delay: 0,
          stopOnLastSlide: false,
          disableOnInteraction: true
        },
        speed: 2000,
        loop: true,
        freeMode: true,
        breakpoints: {
          750: {
            //当屏幕宽度大于等于320
            slidesPerView: 18
          }
        }

        // speed: 2000, //切换速度
        // loop: true, //循环
        // slidesPerView: 8, //显示数量
        // spaceBetween: 0, //间隔
        // freeMode: true, //自动贴合
        // allowTouchMove: false,
        // allowMouseWheel: false,
        // autoplay: {
        //   //自动播放
        //   delay: 0, //自动切换的时间间隔
        //   // stopOnLastSlide: false, //切换到最后一个slide时停止自动切换
        //   // disableOnInteraction: false, //用户操作后是否停止
        //   pauseOnMouseEnter: true
        // },
        // breakpoints: {
        //   750: {
        //     //当屏幕宽度大于等于320
        //     slidesPerView: 18
        //   }
        // }
      })

      const mySwiperElement = document.querySelector(
        '.swiper_teacher .swiper-container'
      )
      // mySwiperElement.addEventListener('mouseenter', () => {
      //   mySwiper[0].autoplay.stop() // 鼠标移入时停止自动播放
      // })
      // mySwiperElement.addEventListener('mouseleave', () => {
      //   mySwiper[0].autoplay.start() // 鼠标移出时开始自动播放
      // })
      // mySwiperElement.addEventListener('mouseenter', () => {
      //   mySwiper[1].autoplay.stop() // 鼠标移入时停止自动播放
      // })
      // mySwiperElement.addEventListener('mouseleave', () => {
      //   mySwiper[1].autoplay.start() // 鼠标移出时开始自动播放
      // })
      // mySwiperElement.addEventListener('mouseenter', () => {
      //   mySwiper[2].autoplay.stop() // 鼠标移入时停止自动播放
      // })
      // mySwiperElement.addEventListener('mouseleave', () => {
      //   mySwiper[2].autoplay.start() // 鼠标移出时开始自动播放
      // })

      //zhou
      getGainTeachers({cate_id: 1}).then(({ data: data })=>{
        console.log(data);
        this.teachersList = data.data
      })
    },
    getNewListData(cateId) {
      getNewsList({ cate: cateId, type: 1 }).then((res) => {
        this.advisory = res.data.data
      })
    },
    getPageList() {
      let _that = this
      getBookList({ cate: 1 }).then(({ data: data }) => {
        this.booksList = data.data
      })
      // setTimeout(() => {}, 2000)
      getGainTeachers().then((res) => {
        _that.teachersList = res.data.data
      })
      // 热门直播
      gethotLiveData().then((res) => {
        _that.hotLiveData = res.data.data
      })
      getCateData().then((res) => {
        this.dataTabs = res.data.data
      })
      // 精选课程
      getCourseList({ cate: 1 }).then(({ data: data }) => {
        _that.courseList = data.data
      })
    },
    downFileList(cateId) {
      // 资料下载
      getDownFileList({ cate_id: cateId }).then(({ data: data }) => {
        this.downloadData = data.data
      })
    },
    studtList(Id) {
      getStudyList({ cate: Id }).then((res) => {
        this.studyData = res.data.data
      })
    },
    courseClick(i, index_val, it) {
      if (index_val == 1) {
        this.active_cur = i
        this.courseId = it.id
        this.studtList(it.id)
      } else if (index_val == 2) {
        this.exam_cur = i
      } else if (index_val == 3) {
        this.consult_cur = i
        this.zixunId = it.id
        this.getNewListData(it.id)
      } else if (index_val == 4) {
        this.dataDownload_cur = i
        console.log(it)
        this.downFileList(it.id)
      } else {
        this.develop_cur = i
      }
    },
    detailModule(src_p, idt) {
      if (src_p) {
        this.$router.push({ path: `${src_p}`, query: { id: idt } })
      }
    },
    exam_practice() {
      this.$router.push({
        path: '/exam_practice/CFA/questionbank',
        query: { cid: 9224 }
      })
    },
    examination() {
      this.$router.push({ path: 'exam_practice/FRM/frmQuestionbank' })
    }
  }
}
</script>

<style scoped lang="scss">
@mixin gol_t {
  height: 100%;
  border-radius: 8px;
  background-color: #fff;
}

.down_t {
  margin-top: 30px;

  .list_nav {
    line-height: 32px;
    padding: 15px 12px;

    &:nth-child(2n) {
      background-color: #faf9f9;
    }

    .el-button.is-round {
      padding: 10px 18px;
      background: linear-gradient(-90deg, #fa4e4e, #fd894f);
    }

    .down_a {
      margin-left: auto;
      width: 65px;
      padding: 5px 12px;
      height: 26px;
      background: linear-gradient(-90deg, #fa4e4e, #fd894f);
      border-radius: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 10px;
      color: #fff;
    }
  }

  .list_nav,
  .img_left_t {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .main_list {
    margin-left: 20px;

    .item_p {
      font-size: 16px;
      line-height: 28px;

      span:first-child {
        background: #edfcf1;
        border-radius: 2px;
        border: 1px solid #b8e7c3;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 10px;
        padding: 0 8px;
        color: #46c564;
        margin-right: 5px;
      }

      & + p {
        font-size: 14px;
        color: #666;
      }
    }
  }
}

.news-push {
  margin-top: 40px;
  .el-image {
    width: 255px;
    height: 170px;
    border-radius: 8px;
    ::v-deep .el-image__inner {
      transition: 0.5s all ease;
    }

    ::v-deep .el-image__inner:hover {
      transform: scale(1.1);
      transition: 0.5s all ease;
    }
  }

  .content {
    border-radius: 8px;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    .article_t {
      display: flex;
      padding: 20px;

      .moreadd {
        text-align: right;
        font-size: 15px;
        transition: 0.5s all ease;
        color: #333;
        height: 20px;

        &:hover {
          text-decoration: underline;
          transition: 0.5s all ease;
          font-size: 20px;
        }
      }
    }

    .cont_left {
      display: flex;
      justify-content: space-between;
      min-width: 0;
      flex-direction: column;
      margin-left: 30px;

      p {
        a {
          font-size: 14px;
          color: #333;
          text-overflow: ellipsis;
          line-height: 22px;
          overflow: hidden;
          white-space: nowrap;
          width: 100%;
          display: inline-block;

          &:hover {
            color: #ff6b00;
          }
        }
      }

      h2 {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        width: 252px;
        font-size: 16px;
        border-left: 2px solid #e7792b;
        line-height: 20px;
        padding-left: 10px;
        margin-bottom: 8px;

        &:hover {
          color: #007bff;
          text-decoration: underline;
        }
      }
    }
  }
}

.system-push {
  margin-top: 40px;
  .el-row {
    display: flex;
  }
  .hot {
    @include gol_t();
    .swiper-slide.swiper-slide-active {
      transform: scale(1);
    }
    .swiper-container {
      margin-top: 40px;
    }
    .swiper-slide {
      width: 300px;
      transform: scale(0.93);
      a {
        img {
          display: block;
          width: 100%;
          height: 169px;
          border-radius: 8px;
        }

        & > div:last-child {
          display: flex;
          justify-content: space-between;
          height: 130px;
          padding: 20px 12px 30px;
          flex-direction: column;
          box-sizing: border-box;

          & > div:first-child {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: 16px;
            line-height: 29px;
            color: #282828;
          }
        }
      }
      .free {
        font-size: 16px;
        text-align: center;
        color: #ff6b00;
      }
    }
  }
  .new {
    @include gol_t();
    .content {
      padding: 30px 20px 40px;
      a:first-child {
        margin-top: 0;
      }
      a {
        margin-top: 20px;
        display: flex;
        padding: 18px 15px;
        background: url('/src/assets/images/new_bg.png') center/cover no-repeat;
        .el-image {
          width: 160px;
          height: 90px;
          border-radius: 4px;
        }
      }

      a > div:last-child {
        flex-direction: column;
        display: flex;
        justify-content: space-between;
        padding: 8px 0 7px;
        margin-left: 15px;

        div:first-child {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          font-size: 14px;
          width: 148px;
          line-height: 20px;
          color: #282828;
        }

        div:last-child {
          font-size: 18px;
          color: #ff6b00;
        }
      }
    }
  }

  .el-col-8 {
    padding: 0 7px;
  }

  .rank {
    @include gol_t();
    .content {
      padding-top: 40px;
      padding-bottom: 45px;

      .el-image {
        width: 120px;
        height: 68px;
        border-radius: 4px;
      }

      a:first-child {
        margin-top: 0;
      }

      a {
        margin-top: 25px;
        display: flex;
        padding-right: 20px;
        padding-left: 24px;
        background-position: 20px center;
        background-size: 36px 42px;
        background-repeat: no-repeat;
        font-size: 12px;
        color: #999;
      }

      a > div:last-child {
        display: flex;
        justify-content: space-between;
        padding: 2px 0;
        margin-left: 15px;
        flex-direction: column;

        div:first-child {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          width: 168px;
          font-size: 14px;
          line-height: 20px;
          color: #282828;
        }
      }
    }
  }
  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    padding-right: 20px;
    padding-left: 20px;
    font-weight: bold;
    font-size: 24px;
    color: #333;

    .el-link.el-link--default {
      width: 20px;
      height: 20px;
      border: 1px solid #2c8eff;
      border-radius: 50%;
      font-size: 12px;
      color: #2c8eff;
    }

    span:first-child {
      color: #2c8eff;
    }

    span:last-child {
      margin-left: 7px;
      font-weight: normal;
      font-size: 14px;
      color: #999;
    }
  }
}

.recommend-head {
  margin-top: 50px;
}

.recommend-main {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 30px -24px -24px 0;
  .item:hover {
    box-shadow: 0 3px 20px rgb(0 0 0 / 7%);
  }

  .item {
    display: block;
    width: 384px;
    padding: 20px 20px 17px;
    border-radius: 8px;
    margin: 0 24px 24px 0;
    box-sizing: border-box;
    background-color: #ffffff;

    .title {
      font-size: 18px;
      line-height: 24px;
      color: #282828;
      padding-top: 0;
    }
  }
  .group {
    display: flex;
    align-items: center;
    margin-top: 38px;

    .total {
      font-size: 16px;
      color: #ff6b00;
    }

    .people {
      flex: 1;
      margin-left: 20px;
      font-size: 14px;
      color: #999999;
    }

    .button {
      height: 30px;
      padding: 0 17px;
      border-radius: 15px;
      background-color: #f2f8ff;
      font-size: 14px;
      line-height: 30px;
      color: #2c8eff;
    }
  }
}

.content_nav {
  .el-image {
    display: block;
    width: 100%;
    height: 100%;
  }
  .swiper-slide {
    width: 300px !important;
    height: 160px;
  }

  width: 100%;
  box-sizing: border-box;

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.recommend-body {
  .el-row a:hover {
    transform: none !important;
    box-shadow: 0 2px 15px rgb(79 109 143 / 20%) !important;
  }

  .group {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 14px 20px 28px;

    .people {
      margin-top: 8px;
      font-size: 14px;
      color: #999999;
    }

    .button {
      height: 34px;
      padding: 0 19px;
      border-radius: 17px;
      background-color: #f2f8ff;
      font-size: 16px;
      line-height: 34px;
      color: #2c8eff;
    }
  }

  .money {
    font-size: 14px;
    color: #ff6b00;

    span {
      font-size: 24px;
    }
  }
}

.advert-push1 {
  padding: 30px;

  .el-col-8 {
    padding: 0 7px;
  }

  .el-image {
    width: 100%;
    height: 100px;
    border-radius: 8px;
  }
}

.recommend2 {
  margin-top: 10px;
  .el-image {
    height: 100%;
  }

  .el-col-8 {
    padding: 0 7px;
  }

  .el-row {
    a {
      display: block;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;

      .live_teacher {
        color: #262626;
        font-size: 20px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        height: 52px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }

  .live1 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding-right: 10px;
    padding-left: 42px;
    border-bottom-right-radius: 8px;
    background: rgba(0, 0, 0, 0.6) url('/src/assets/images/live1.png') 15px
      center/16px 16px no-repeat;
    font-size: 15px;
    line-height: 31px;
    color: #fff;
  }
}

.recommend {
  padding-bottom: 30px;
  .seeMore {
    display: block;
    margin: 10px auto 0;
    width: 175px;
    color: #e7792b;
    height: 48px;
    text-align: center;
    line-height: 48px;
    border-radius: 8px;
    font-size: 14px;
    border: 1px solid rgba(238, 238, 238, 1);
  }
  .el-col {
    margin-bottom: 14px;
    padding: 0 7px;
  }

  .swiper_teacher {
    position: relative;
    .teacher_img {
      &:hover {
        background: linear-gradient(-45deg, #fa4e4e, #fd894f);
        // opacity: 0.74;
        img {
          opacity: 0.4;
        }

        p {
          width: 100%;
          position: absolute;
          top: 0;
          bottom: 0;
          color: #fff;
          text-align: center;
          line-height: 160px;
          background: linear-gradient(-45deg, #fa4e4e, #fd894f);
          opacity: 0.74;
        }
      }
    }

    .el-col-6 {
      width: 100%;
    }

    .swiper-container-free-mode > .swiper-wrapper {
      -webkit-transition-timing-function: linear !important;
      -o-transition-timing-function: linear !important;
      transition-timing-function: linear !important;
    }
  }

  .el-row {
    margin-top: 30px;
    a {
      display: block;
      border-radius: 8px;
      background-color: #fff;
      overflow: hidden;
      transition: 0.3s;

      .el-image {
        display: block;
        width: 100%;
        height: 160px;
      }

      .el-image + div {
        padding: 0 15px;
      }
    }
  }

  .el-row a:hover {
    transform: translateY(-6px);
    box-shadow: 0 2px 16px rgb(79 109 143 / 12%);
  }

  .label-count {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 48px;
    border-top: 1px dashed #eee;
    font-size: 14px;
    color: #999;

    .actrie {
      display: flex;
      align-items: center;
      .el-image {
        width: 40px;
        height: 40px;
        border-radius: 100%;
        margin-right: 5px;
      }
    }

    .money {
      font-size: 14px;
      color: #ff6b00;

      span {
        font-size: 18px;
      }
    }
  }

  .browse-money {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 14px;
    color: #666;

    .el-tag {
      height: 22px;
      padding-right: 9px;
      padding-left: 9px;
      border-color: rgba(44, 142, 255, 0.06);
      border-radius: 2px;
      background-color: rgba(44, 142, 255, 0.06);
      line-height: 20px;
      color: #2c8eff;
    }
  }

  .title {
    padding-top: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 16px;
    color: #333;
  }

  .head_t {
    display: flex;
    justify-content: flex-start;

    align-items: center;
    font-weight: bold;
    font-size: 24px;
    color: #333;
    padding-left: 8px;
    border-bottom: 1px solid #eee;
    line-height: 48px;

    .more_g {
      flex: 2;
      text-align: right;

      a {
        font-size: 15px;
        font-weight: normal;
        color: #999;
        line-height: 34px;
      }
    }
    .tab_cut {
      .tab {
        display: flex;
        align-items: center;
        justify-content: left;
        margin-left: 20px;

        li {
          width: 65px;
          height: 38px;
          line-height: 34px;
          color: #999999;
          border-radius: 20px;
          text-align: center;
          margin-right: 10px;
          cursor: pointer;
          font-weight: normal;
          font-size: 16px;

          &:hover {
            color: #0384fc;
          }
        }

        .cur {
          color: #0384fc;
          font-weight: bold;

          &::after {
            content: '';
            border-radius: 4px;
            width: 38px;
            height: 3px;
            background: #0384fc;
            box-sizing: border-box;
            display: block;
            margin: 0 auto;
          }
        }
      }
    }

    .Boutique {
      h3 {
        font-weight: bold;
        font-size: 24px;
        color: #333;
      }
    }

    div {
      span {
        margin-top: 0px;
        letter-spacing: 3px;
        font-size: 16px;
        font-weight: normal;
        opacity: 1;
        color: #3e3a39;
        font-family: PingFangSC;
      }
    }
  }

  .el-link.el-link--default:hover {
    color: #606266;
  }
}

.el-link {
  user-select: none;
}

.button_global {
  width: 65px;
  height: 26px;
  background: linear-gradient(-90deg, #fa4e4e, #fd894f);
  border-radius: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #fff;
  border: none;
  cursor: pointer;
}

.develop {
  .map_t {
    text-align: center;
    width: 100%;
    img {
      height: auto;
    }
  }
}
</style>
